<template>
  <div class="shopdetail">
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
    >
      <van-swipe-item
        v-for="item in goodsDetails.goodsBannerImg"
        :key="item.id"
      >
        <img
          v-lazy="item"
          alt=""
        />
      </van-swipe-item>
    </van-swipe>
    <div class="bannerDesc">
      <div class="price">￥1299</div>
      <div class="count">
        <p>原价￥2299</p>
        <p>仅剩5件</p>
      </div>
      <div class="time">
        <p>限时秒杀</p>
        <div>
          <p>距结束仅剩</p>
          <van-count-down
            :time="time"
            format="2 天 23 时 52 分 33 秒"
          />
        </div>
      </div>
    </div>
    <van-cell-group>
      <van-field
        class="shopintro"
        :label="goodsDetails.goodsName"
        :value="goodsDetails.goodsBrief"
        readonly
      />
      <div class="shopdetail">
        <van-field
          label="服务"
          value="●质检保障●七天无理由●365天质保质检保障●顺丰包邮●上门安装"
          readonly
        >
        </van-field>
        <van-field
          label="发货"
          value="湖南省长沙市"
          readonly
        />
        <van-field
          label="已选"
          :value="goodsDetails.goodsName"
          readonly
        />
        <van-field
          label="参数"
          value="品牌、材质等"
          readonly
        />
      </div>
    </van-cell-group>
    <div
      class="introImg"
      v-for="img in goodsDetails.goodsIntroImg"
      :key="img.id"
    >
      <img
        v-lazy="img"
        alt=""
      />
    </div>
    <van-goods-action>
      <van-goods-action-icon
        icon="chat-o"
        text="客服"
        color="#ee0a24"
      />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        :badge="$store.getters['goodsDetail/getAllCount']"
        to="/cart"
      />
      <van-goods-action-icon
        icon="star"
        text="已收藏"
        color="#ff5000"
      />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addCart"
      />
      <van-goods-action-button
        type="danger"
        text="立即抢购"
      />
    </van-goods-action>
  </div>
</template>
<script>
import { goodsDetailList } from '@/api/todos';

export default {
  // props: ['id'],
  data() {
    return {
      time: 0,
      goodsDetails: {},
      value: 1,
    };
  },
  created() {
    this.getGoodsList();
  },
  methods: {
    async getGoodsList() {
      const res = await goodsDetailList();
      // 讲讲map返回的是数组 你要返回什么就return什么 ,而且他不会改变原数组的长度！
      // filter 返回 满足条件的数组！
      // 如果我有多个满足，就返回多个！
      console.log(this.$route.query.id);
      this.goodsDetails = res.data.filter((i) => i.goodsId === this.$route.query.id)[0];
      console.log(this.goodsDetails);
    },
    addCart() {
      const goodsInfo = {
        id: this.goodsDetails.goodsId,
        count: this.value,
        price: this.goodsDetails.goodsPrice,
        img: this.goodsDetails.goodsBannerImg[0],
        title: this.goodsDetails.goodsName,
        desc: this.goodsDetails.goodsBrief,
        isChecked: true,
      };
      console.log(goodsInfo);
      this.$store.commit('goodsDetail/addCart', goodsInfo);
    },
  },
};
</script>
<style
  lang="scss"
  scoped
>
.shopdetail {
  margin-top: 46px;
  .my-swipe {
    img {
      width: 435px;
      height: 205px;
    }
  }
  .bannerDesc {
    margin-top: -10px;
    height: 49px;
    width: 100%;
    display: flex;
    background-color: #797979;
    .price {
      font-size: 20px;
      font-weight: 600;
      font-style: italic;
      line-height: 49px;
      margin-right: 10px;
    }
    .count {
      margin-top: 9px;
      p {
        font-size: 12px;
        display: block;
        color: #fff;
        margin: 2px 0 0;
      }
    }
    .time {
      color: #c3c3c3;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      margin: 8px 0 0 30px;
      p {
        font-size: 14px;
        display: block;
        color: #fff;
        margin: 0;
      }
      div {
        display: flex;
        .van-count-down {
          color: #fff;
        }
      }
    }
  }

  .shopdetail {
    margin-top: 20px;
    background-color: #c3c3c3;
  }
  .van-cell {
    border: 1px solid #eee;
  }
  .introImg {
    img {
      height: 500px;
      width: 100%;
    }
  }
}
</style>
